<template>
  <div class="nav-item">
    <div class="nav-item-title" @dblclick.stop="updateTypeName">
      <slot name="typeTitle"></slot>
    </div>
    <ul class="nav-item-list">
      <draggable :list="headerList" :group="group" @end="draggableHeader()">
        <transition-group class="dragg-header">
          <li
            v-for="item in headerList"
            :key="item._id"
            class="list-item"
            @click="gotoHeader(item.url_address)"
          >
            <div class="list-item-content">
              <img
                :src="item.url_icon"
                alt=""
                style="
                  width: 30px;
                  height: 30px;
                  border-radius: 10px;
                  vertical-align: middle;
                  margin-top: -5px;
                "
              />
              <div
                class="el-icon-close delete"
                @click.stop="deleteHeader(item._id)"
              ></div>
              <div class="text">{{ item.url_name }}</div>
            </div>
          </li>

          <li key="888" class="el-icon-plus list-item" @click="addHeader"></li>
        </transition-group>
      </draggable>
    </ul>
    <div class="el-icon-close delete-type" @click="deleteType"></div>
  </div>
</template>

<script>
import draggable from "vuedraggable";
export default {
  props: {
    headerList: {
      type: Array,
    },
    typeId: {
      type: String,
    },
  },
  emits: [
    "btnClick",
    "handlerDelete",
    "typeUpdate",
    "typeDelete",
    "saveDraggable",
  ],
  components: { draggable },
  data() {
    return {
      group: { name: "header", pull: true, put: true },
    };
  },
  created() {},
  methods: {
    addHeader() {
      this.$emit("btnClick", this.typeId);
    },
    deleteHeader(url_id) {
      this.$emit("handlerDelete", url_id);
    },
    gotoHeader(address) {
      window.open(address);
    },
    updateTypeName() {
      this.$emit("typeUpdate", this.typeId);
    },
    deleteType() {
      this.$emit("typeDelete", this.typeId);
    },
    draggableHeader() {
      this.$emit("saveDraggable");
    },
  },
};
</script>

<style scoped lang="less">
.element::-webkit-scrollbar {
  width: 0 !important;
}
// .nav-item:nth-child(2n) {
//   margin-left: 105px;
// }
// .nav-item:nth-child(2n + 1) {
//   margin-bottom: 0px;
//   margin-top: 0px;
// }
.nav-item {
  position: relative;
  background-color: rgba(255, 255, 255, 0.4);
  width: 31%;
  height: 45%;
  margin: 5px 50px 25px 50px;
  border-radius: 40px;
  overflow-x: hidden;

  .nav-item-title {
    font-size: 20px;
    width: 100px;
    height: 30px;
    line-height: 30px;
    background-color: rgb(209, 206, 206);
    margin: 0 auto;
    margin-top: 16px;
    padding: 3px 0;
    border-radius: 15px;
  }

  .nav-item-list {
    list-style: none;
    height: 72%;
    width: 110%;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0 auto;
    padding: 0 !important;
    // background-color: #4e6674;
    .dragg-header {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      overflow-y: auto;
      overflow-x: hidden;
      height: 110%;
      width: 90%;
      margin-left: 20px;
      margin-top: 10px;

      .list-item {
        height: 58px;
        width: 58px;
        margin: 8px 8px;
        text-align: center;
        line-height: 58px;
        border-radius: 20px;
        background-color: rgb(255, 255, 255);
        transition: all 0.2s ease;
      }

      .list-item:nth-child(4n) {
        margin-right: -30px;
      }
      .list-item:nth-child(4n + 1) {
        margin-left: 8px;
      }
      .list-item:nth-child(n-4) {
        margin-top: 10px;
      }
      .list-item:last-child {
        background-color: rgba(247, 247, 247, 0.4);
      }
      .list-item:hover {
        background-color: rgba(165, 160, 160, 0.6);
        img {
          opacity: 0.2;
        }
        .text,
        .delete {
          display: block;
        }
      }
      .list-item:last-child:hover {
        background-color: rgba(255, 255, 255, 0.7);
      }
    }
  }

  .delete-type {
    position: absolute;
    display: none;
    top: 10px;
    right: 5px;
    font-size: 30px;
    width: 40px;
    height: 40px;
    color: #4e6674;
  }
}
.nav-item:hover {
  // background-color: rgba(165, 160, 160, 0.6);
  .delete-type {
    display: block;
  }
}
.list-item-content {
  position: relative;
  .delete {
    display: none;
    position: absolute;
    top: 3px;
    right: 5px;
    color: white;
  }

  .text {
    display: none;
    position: absolute;
    top: 28%;
    margin-left: 50%;
    transform: translate(-50%, 0);
    font-size: 18px;
    font-weight: 700;
    color: rgb(255, 255, 255);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
}
</style>
